<template>
  <div class="box">
    <div class="header">
      <template>
        <van-icon name="arrow-left" size="30" color="black" @click="$router.push('/home')" />
      </template>
      <template>
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          shape="round"
        />
      </template>
    </div>
    <div class="main">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          :title="item"
          v-for="(item, index) in KindList"
          :key="index"
          @click="liebiao"
        />
      </van-sidebar>
      <van-tabs v-model="active">
        <van-tab :title="item.brand" v-for="(item, index) in list" :key="index"
          >内容 1</van-tab
        >
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { Classification, BrandList } from "../api/kind";
import Vue from "vue";
import { Search, Sidebar, SidebarItem, Tab, Tabs } from "vant";

Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Sidebar);
Vue.use(SidebarItem);
Vue.use(Search);
export default {
  data() {
    return {
      value: "",
      activeKey: 0,
      KindList: [],
      active: "2",
      list: [],
    };
  },

  created() {
    Classification().then((res) => {
      // console.log(res.data);
      this.KindList = res.data.data;
    });
  },
  methods: {
    liebiao(index) {
      BrandList({ category: this.KindList[index] }).then((res) => {
        console.log(res.data.data);
        this.list = res.data.data;
      });
    },
  },
};
</script>
<style scoped>
.header {
  display: flex;
  background-color: #fff;
}
::v-deep .van-search {
  width: 300px;
  background-color: #fff;
}
.main {
  display: flex;
  
}
</style>
